<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%
    String ctx =  pageContext.getRequest().getServletContext().getContextPath();//文件路径
    request.setAttribute("ctx",ctx);
    String contextPath = request.getContextPath();//webroot相对路径
    request.setAttribute("contextPath",contextPath);
  %>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%--<link href="${contextPath}/css/mycss.css" rel="stylesheet">--%>
  <%--<link href="${contextPath}/css/bootstrap.css" rel="stylesheet">--%>
  <%--<link href="${contextPath}/css/bootstrap-theme.css" rel="stylesheet">--%>
  <link href="${contextPath}/jsp/waterfall/css/waterfall_common.css" rel="stylesheet">
  <%--<script type="text/javascript" src="${contextPath}/jsp/waterfall/waterfall_common.js" ></script>--%>
  <!-- DC iMenu CSS -->
  <%--<link type="text/css" rel="stylesheet" href="${contextPath}/css/blog/menus/imenu/css/dc_imenu.css" />--%>

  <title>reesechou2014</title>
</head>

<body  >
<div id="main">
  <div class="box">
    <div class="pic">
      <img src="images/1.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/2.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/3.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/4.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/5.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/6.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/7.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/8.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/1.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/2.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/3.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/4.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/5.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/6.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="images/7.jpg" />
    </div>
  </div>
</div>

<script type="text/javascript">
  window.onload=function(){
    waterfall('main','box');//对main下的box进行瀑‘布流
    //json:这里data是dataInt的属性，src是data的属性，调用属性时之间是 对象.属性
    var dataInt={"data":[{'src':'10.jpg'},{'src':'9.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'}]};//真正的数据应是从后台获取，这里手动模拟
    window.onscroll=function(){//拖动滚动条时触的函数
      if(checkScrollSide()){//如果满足触发条件，执行下列代码
        //将数据渲染到当前页面的尾部
        var oParent=document.getElementById('main');
        for(var i=0;i<dataInt.data.length;i++){
          //将完整的box创建在main中
          var oBox=document.createElement('div');
          oBox.className="box";
          oParent.appendChild(oBox);
          var oPic=document.createElement('div');
          oPic.className="pic";
          oBox.appendChild(oPic);
          var oImg=document.createElement('img');
          oImg.src="images/"+dataInt.data[i].src;//从json中获取路径
          oPic.appendChild(oImg);
        }
        waterfall('main','box');//新加载的图片并没有按waterfall排列，因此在这再次调用waterFall
      }
    }
  }
  function waterfall(parent,box){
    //将main下所有class为box的元素取出
    var oParent=document.getElementById('main');
    var oBoxs=getByClass(oParent,box);
    //计算整个页面显示的列数（页面宽/box宽）
    var oBoxW=oBoxs[0].offsetWidth;//offsetWidth包括padding，offsetWidth是子元素相对于父容器的宽度
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//取整、页面可视区的宽度
    //设置main的宽度
    oParent.style.cssText="width:"+oBoxW*cols+'px';//cssText使附加的css如外联样式写法一样
    //将除第一行的图片优先加在第一行中高度最小的图片下；
    var hArr=[]//存放每一列高度的数组
    for(var i=0;i<oBoxs.length;i++){
      if(i<cols){//将第一行的图片的高度分别存入hArr
        hArr.push(oBoxs[i].offsetHeight);
      }else{//将下一个box放入第一行中高度最小的图片下；
        var minH=Math.min.apply(null,hArr);//Math.min(中间放的是一组数据，不能是数组)，Math.min.apply()可以解决数组，apply方法可以改变数组中this的指向
        var index=getMinhIndex(hArr,minH);//获取高度最小的图片的索引值
        oBoxs[i].style.cssText="position:absolute; top:"+minH+'px;'//将box定位在高度最小的图片下方
        oBoxs[i].style.left=oBoxW*index+'px';//法二：=oBoxs[index].offsetLeft+'px';
        hArr[index]+=oBoxs[i].offsetHeight;//更新一下加完新图片后的列的高度
      }
    }
  }
  function getByClass(parent,clsName){//根据class获取元素
    var boxArr=new Array();//定义一个数组，用来储存获取到的所有class为box的元素
    var oElements= parent.getElementsByTagName("*");//获取parent下的所有元素
    for(var i=0;i<oElements.length;i++){//对获取到的所有元素进行循环
      if(oElements[i].className==clsName){//如果有元素的class与给定的参数clsName一样
        boxArr.push(oElements[i]);//将该元素加到boxArr数组中
      }
    }
    return boxArr;
  }
  function getMinhIndex(arr,val){//获取arr中高为val的索引值
    for(var i in arr){
      if(arr[i]==val){
        return i;
      }
    }
  }
  //检测是否具备加载的条件（条件：当最后一个box出现一半时）
  function checkScrollSide(){//返回一个布尔值
    var oParent=document.getElementById('main');
    var oBoxs=getByClass(oParent,'box');
    //获取最后一个box距顶端的距离（包括卷起的高度）+该box的一半高度
    var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    //滚动条滚动的距离+可视区的高度
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop+document.body.clientHeight||document.documentElement.clientHeight;
    console.log(scrollTop);
    return (lastBoxH<scrollTop)?true:false;
  }
</script>
</body>
</html>